<!--口罩机分类管理-->
<template>
  <el-scrollbar style="height: 100%;">
    <div class="operator_type">
      <div class="prent_content">
        <div class="operator_content">
          <p class="Toptitle">
            <img src="../../../../static/image/content_title.png" alt width="20" height="16" />
            <span>分类管理</span>
          </p>
          <p class="searchp">
            <el-input
              placeholder="名称 检索"
              v-model="searxh"
              clearable
              class="searchinpt"
              @input="parentData"
            ></el-input>
            <el-button class="searchadd" @click="showaddDialog">新建</el-button>
          </p>
          <!--表格 :cell-style="{background:'#00295E',color:'#fff'}"-->
          <el-table
            :data="parenttableData"
            style="width: 100%"
            :header-cell-style="{background:'#003983',color:'#fff',fontWeight:'normal'}"
            @row-click="parentrowClick"
          >
            <el-table-column prop="name" label="口罩机名称"></el-table-column>
            <el-table-column :formatter="formattype" prop="mask_type" label="口罩机类型"></el-table-column>
            <el-table-column prop="infomation" label="口罩机说明"></el-table-column>
            <el-table-column prop="create_date" label="创建时间"></el-table-column>
            <el-table-column label="操作" prop="do">
              <template slot-scope="scope">
                <button size="small" class="commonbut editbut" @click="showeditDialog(scope.row)">修改</button>
                <!-- <button size="small" class="commonbut deletebut">删除</button> -->
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <!-- <div class="pageright">
            <el-pagination
              :current-page="parentpage"
              :page-size="parentsize"
              :page-sizes="parentsizes"
              :total="parentsum"
              @current-change="currChange"
              @size-change="sizeChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>-->
        </div>
      </div>

      <div class="child_content">
        <div class="operator_content">
          <p class="Toptitle">
            <img src="../../../../static/image/content_title.png" alt width="20" height="16" />
            <span>{{parentTableName}}</span>
          </p>
          <p class="searchp">
            <el-input
              placeholder="名称 检索"
              v-model="childsearxh"
              clearable
              class="searchinpt"
              @input="childsearch"
              :disabled="parentTableId.length<=0?true:false"
            ></el-input>
            <el-button
              class="searchadd"
              @click="addChildDialog"
              :disabled="parentTableId.length<=0?true:false"
            >新建</el-button>
          </p>
          <!--表格 :cell-style="{background:'#00295E',color:'#fff'}"-->
          <el-table
            :data="childtableData"
            style="width: 100%"
            :header-cell-style="{background:'#003983',color:'#fff',fontWeight:'normal'}"
          >
            <el-table-column prop="name" label="变量名称"></el-table-column>
            <el-table-column prop="key" label="关键字"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="write" :formatter="formatwrite" label="是否可写"></el-table-column>

            <el-table-column label="操作" prop="do">
              <template slot-scope="scope">
                <button
                  size="small"
                  class="commonbut editbut"
                  @click="editChildDialog(scope.row)"
                >修改</button>
                <!-- <button size="small" class="commonbut deletebut">删除</button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--父表新增修改dialog-->
    <typeEdit
      :dialog-form-visible="dialogFormVisible"
      :edittitle="edittitle"
      :roleform="roleform"
      @backtable="closeEdit"
      @chirldSave="saveData"
      @chirldEdit="editData"
    ></typeEdit>
    <!--子表新增修改dialog-->
    <ChildEdit
      :child-dialog-form-visible="childDialogFormVisible"
      :childEdittitle="childEdittitle"
      :childRoleform="childRoleform"
      @backtable="closeChildEdit"
      @chirldSave="saveChildData"
      @chirldEdit="editChildData"
    ></ChildEdit>
  </el-scrollbar>
</template>
<script>
import typeEdit from "./operator_type_edit";
import ChildEdit from "./operator_type_child_edit";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    typeEdit,
    ChildEdit
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      //子表数据
      childtableData: [],
      childsearxh: "",
      parentTableId: "",
      parentTableName: "",
      //父表数据
      parenttableData: [],
      searxh: "",
      parentsum: 0,
      parentpage: 1,
      parentsize: 5,
      parentsizes: [5, 10, 20, 30, 50],
      //父表编辑框
      dialogFormVisible: false,
      edittitle: "",
      roleform: {},
      //子表编辑框
      childDialogFormVisible: false,
      childEdittitle: "",
      childRoleform: {}
    };
  },
  mounted() {
    this.parentData();
  },
  methods: {
    /**
     * 分页事件
     */
    currChange(curr) {
      // page页改变触发事件
      this.loading = true;
      this.page = curr;
      // this.initTable();
    },
    sizeChange(curr) {
      this.size = curr;
      // this.initTable();
    },
    //父表数据
    parentData() {
      var params = {
        token: this.token,
        name: this.searxh,
        mask_type: this.searxh
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Classification.ClassifyList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("分类管理父表数据", res);
            this.parenttableData = res.data;
          } else {
            console.log(res.msg);
          }
        });
    },
    //口罩类型
    formattype: function(row, column) {
      return row.mask_type == 1
        ? "普通口罩机"
        : row.mask_type == 2
        ? "高速口罩机"
        : row.mask_type == 3
        ? "其他"
        : row.mask_type == 4
        ? "待定"
        : "";
    },
    /**父表编辑 */
    /**新增框 */
    showaddDialog() {
      this.edittitle = "addData";
      this.dialogFormVisible = true;
      this.roleform = {};
    },
    showeditDialog(row) {
      this.edittitle = "updateData";
      var params = {
        token: this.token,
        id: row.id
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Classification.ClassifyDetail&api=193`,
          { params: params }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("行详情", res);
            this.roleform = res.data;
            this.dialogFormVisible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    /**父表弹出框 */
    closeEdit() {
      // 关闭编辑框
      this.dialogFormVisible = false;
    },
    //保存添加事件
    saveData(form) {
      // 编辑、新增保存事件
      console.log("报存事件", form);
      var params = {
        token: this.token,
        name: form.name,
        mask_type: form.mask_type,
        infomation: form.infomation
      };
      this.$http
        .post(
          `${this.$basePath}?service=App.Classification.AddClassify&api=193`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("添加分类", res);
            this.dialogFormVisible = false;
            this.parentData();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    //修改当前行
    editData(form) {
      // 编辑、新增保存事件
      console.log("编辑事件", form);
      var params = {
        token: this.token,
        id: form.id,
        name: form.name,
        mask_type: form.mask_type,
        infomation: form.infomation
      };
      this.$http
        .post(
          `${this.$basePath}?service=App.Classification.EditClassify&api=193`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("修改分类", res);
            this.dialogFormVisible = false;
            this.parentData();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    //父表点击行触发字表
    parentrowClick(row, event, column) {
      this.childsearxh = "";
      this.parentTableId = row.id;
      this.parentTableName = row.name;
      var params = {
        token: this.token,
        mask_machine_type: row.id,
        name: this.childsearxh
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Variable.CommonVariableList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("分类管理子表数据", res);
            this.childtableData = res.data.list;
          } else {
            console.log(res.msg);
          }
        });
    },
    //子表读写公共变量
    formatwrite: function(row, column) {
      return row.write == "0" ? "否" : row.write == "1" ? "是" : "未知";
    },
    //字表搜索
    childsearch() {
      var params = {
        token: this.token,
        mask_machine_type: this.parentTableId,
        name: this.childsearxh
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Variable.CommonVariableList&api=193`,
          {
            params: params
          }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("分类管理子表数据", res);
            this.childtableData = res.data.list;
          } else {
            console.log(res.msg);
          }
        });
    },
    /**子表弹框框 */
    //子表新增框
    addChildDialog() {
      this.childEdittitle = "addData";
      this.childDialogFormVisible = true;
      this.childRoleform = {};
    },
    //子表修改框
    editChildDialog(row) {
      //获取子有变量详情传到dialog
      this.childEdittitle = "updateData";
      var params = {
        token: this.token,
        id: row.id
      };
      this.$http
        .get(
          `${this.$basePath}?service=App.Variable.CommonVariableDetail&api=193`,
          { params: params }
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("子表行详情", res);
            this.childRoleform = res.data;
            this.childDialogFormVisible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    //子表关闭框
    closeChildEdit() {
      this.childDialogFormVisible = false;
    },
    //子表新增保存
    saveChildData(form) {
      // 编辑、新增保存事件
      console.log("子表保存事件", form);
      var params = {
        token: this.token,
        mask_machine_type: this.parentTableId,
        name: form.name,
        key: form.key,
        description: form.description,
        write: form.write
      };
      this.$http
        .post(
          `${this.$basePath}?service=App.Variable.AddCommonVariable&api=193`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("添加公共变量", res);
            this.childDialogFormVisible = false;
            this.childsearch();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    //子表修改保存
    editChildData(form) {
      console.log("编辑事件", form);
      var params = {
        token: this.token,
        mask_machine_type: this.parentTableId,
        name: form.name,
        key: form.key,
        description: form.description,
        write: form.write,
        id: form.id
      };
      this.$http
        .post(
          `${this.$basePath}?service=App.Variable.EditCommonVariable&api=193`,
          params
        )
        .then(res => {
          if (res.ret == 200) {
            console.log("修改公有变量", res);
            this.childDialogFormVisible = false;
            this.childsearch();
          } else {
            this.$message.error(res.msg);
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/operator";
.operator_type {
  width: 100%;
  display: flex;
  height: 100%;
  .child_content {
    width: 527px;
    box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
    height: 100%;
    background: rgba(0, 41, 94, 0.7);
    border: 1px solid rgba(11, 91, 167, 1);
  }
  .prent_content {
    width: 100%;
    //  min-height: 100vh;
    margin-right: 10px;
    box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
    height: 100%;
    background: rgba(0, 41, 94, 0.7);
    border: 1px solid rgba(11, 91, 167, 1);
    // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  }
}
.react {
  width: 100%;
  height: 100%;
  padding-top: 15px;
  box-sizing: border-box;
  background: linear-gradient(to left, #00e8ff, #00e8ff) left top no-repeat,
    linear-gradient(to bottom, #00e8ff, #00e8ff) left top no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) right top no-repeat,
    linear-gradient(to bottom, #00e8ff, #00e8ff) right top no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) left bottom no-repeat,
    linear-gradient(to bottom, #00e8ff, #00e8ff) left bottom no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) right bottom no-repeat,
    linear-gradient(to left, #00e8ff, #00e8ff) right bottom no-repeat;
  background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
}
</style>